{% extends "base.htm" %} 

{% block main_content %}

<div class="features_box">
	The chatroom doesn't work if two clients run in same browser in same machine
</div>

<div class="channel_container">

{% if client_token and chatter_name %} 
	<span class="title1">Welcome, {{ chatter_name }}</span> (<a class="command_link" href="#" id="btn_leave_room">Exit</a>)
	<div class="text_container" id="text_container"></div>
	<form id="message_from">
	<input type="hidden" name="msg_type" id="msg_type" value="message" />
	<input type="hidden" name="command_message" id="command_message" value="" />
	<input type="hidden" name="sender" value="{{ chatter_name }}" />
	<table class="chat_container"><tr><td style="width: 95%;"><textarea class="chat_area" name="text_chat" id="text_chat"></textarea></td><td></td><td><input type="button" value="Send" id="button_send_text" /></td></tr></table>
	</form>

<form action="/channel" id="frm_room" method="post"><input type="hidden" name="action" value="leave" /></form>
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<script type="text/javascript">
    var self_name = '{{ chatter_name }}';
    var StyleNameForOtherSender = 'message_sender_other';
    var StyleNameForSelfSender =  'message_sender_self';
    
    function onSocketOpened() {
    	postMessageToServer( true , 'opened' );
    	printText( '<span class="communication_command">Socket opened</span>' );
    }
    
    function postMessageToServer(isCommandMessage , cmdMsg) {
    	var frm = $("#message_from");
    	var msg_type = frm.find('#msg_type');
    	if( isCommandMessage ) {
    		msg_type.val('command');
    		frm.find('#command_message').val( cmdMsg );
    	} else {
    		msg_type.val('message');
    	}
    	
		$.post( '/channel/handler' , frm.serialize() );
    }
    
    function onSocketMessage(msg) {
    	var newData = JSON.parse(msg.data);
    	if( self_name!=newData.sender ) {
	    	if( newData.isCommand ) {
	    		if ( newData.commandText == 'closed' )	    	
	    			printText( '<span class="communication_command"> '+ newData.sender +' left the room</span>' );
	    		else if ( newData.commandText == 'opened' )	
	    			printText( '<span class="communication_command"> '+ newData.sender +' joined the room</span>' );
	    		else 
	    			printText( '<span class="communication_command"> '+ newData.sender +': '+ newData.commandText+'</span>' );
	    	} else {
		    	printChatContent( StyleNameForOtherSender, newData.sender , newData.message);
	    	}
    	}
    }
    
    function onSocketError(err) {
    	printText( '<span class="communication_command">Socket failed</span>. <br />Code: ' + err.code + '<br />Description:' + err.description );
    }
    
    function onSocketClosed() {    	
    	printText( '<span class="communication_command">Socket closed</span>' );
    }
    
    function printText(text) {
    	var txtCtrl = $('#text_container')
    	txtCtrl.append(text + '<br />');
    	var scrollValue = txtCtrl.attr("scrollHeight") - txtCtrl.height();
    	txtCtrl.animate( { scrollTop: scrollValue } , 1000 );
    }
    
    function printChatContent(styleName , sender ,  message ) {
    	printText( '<span class="' + styleName + '">' + sender + '</span><br /><pre class="sender_content">' + message+ '</pre>');
    }
    
    var socket = (new goog.appengine.Channel('{{ client_token }}')).open();
    socket.onopen = onSocketOpened;
    socket.onmessage = onSocketMessage;
    socket.onerror = onSocketError;
    socket.onclose = onSocketClosed;
	$(function() {
		$('#btn_leave_room').click( 
			function() {
				if (confirm('Are you sure ?')) {	
					postMessageToServer( true , 'closed' );
					socket.close();
					$('form#frm_room').submit();
				}
			}
		);
		
		$("#button_send_text").click(
			function() {
				var textCtrl = $('form #text_chat');
				if( textCtrl.val()!='' ) {
					postMessageToServer( false , null );				
					printChatContent( StyleNameForSelfSender , self_name , textCtrl.val() );
					textCtrl.val('');
				}
			}
		);
	});
</script>

{% else %} 
	<div class="title1">Chat room application</div>
	<p>Enter your name to go to chat room<form action="/channel" method="post">Name <input type="text" name="chatter-name" class="normal_text_field" /> <input type="submit" value="Enter room" /></form></p>
{% endif %} 

</div>

{% endblock %}
